<!DOCTYPE html>
<html lang="is">
    <head>
        <meta charset="ISO-8859-1" />
        <meta name="apple-mobile-web-app-capable" content="yes">
        <title>School App</title>
		<link href="Content/Site.css" type="text/css" rel="stylesheet">
		<link rel="stylesheet" href="Content/default/default.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="Content/pascal/pascal.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="Content/orman/orman.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="Content/nivo-slider.css" type="text/css" media="screen" />
        <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript" ></script>
        <script src="Scripts/kinetic-v3.9.4.js" type="text/javascript" ></script>
        <script>
            function isNearOutline(taska, goal) {
                var a = taska;
                var o = goal;
                if(a.attrs.x > o.x - 70 && a.attrs.x < o.x + 70 && a.attrs.y > o.y - 110 && a.attrs.y < o.y + 110) {
                    return true;
                }
                else {
                    return false;
                }
            }
            window.onload = function() {
                var stage = new Kinetic.Stage({
                    container: "indexContainer",
                    width: 1000,
                    height: 700
                });
                var layer = new Kinetic.Layer();
                var goals = {
                    hurd: {
                        url:"blueprint.html", x:  560, y : 370
                    },
                    hljod: {
                        name: "hljod",
                        x: 830, y: 20
                    }
                };

                var skolataskaImg = new Image();
                skolataskaImg.onload = function() {
                    var skolataska = new Kinetic.Image({
                        image: skolataskaImg,
                        x: 130,
                        y: 530,
                        draggable: true
                    });

                    layer.add(skolataska);
                    stage.add(layer);

                    // add cursor styling
                    skolataska.on("mouseover", function() {
                        layer.draw();
                        document.body.style.cursor = "pointer";
                    });
                    skolataska.on("mouseout", function() {
                        layer.draw();
                        document.body.style.cursor = "default";
                    });
                    skolataska.on("dragend", function() {
                        for (var key in goals) {
                            if(isNearOutline(skolataska, goals[key])) {
                                var currentGoal = goals[key];
                                if (goals[key].url) {
                                    window.location.href = goals[key].url;
                                }else if (currentGoal.name == 'hljod') {
                                    var audioElem = document.getElementById('audioPlayer');
                                    audioElem.play();
                                }
                            }
                        }
                    });
                };
                skolataskaImg.src = "Images/skolataska.png";
            };
        </script>
    </head>
    <body>
    <div id="player">
        <audio id="audioPlayer">
            <source id="velkomin" src="Audio/VELKOMIN-I-KORPUSKOLA-FERDAST-MED-TOSKU.mp3" type="audio/mpeg" />
        </audio>
    </div>
    <div class="centerContainer">
            <div id="indexContainer"></div>
		</div>
    </body>
</html>














